Wake Lock API: Ekranni O'chishdan Saqlash Bo'yicha To'liq Qo'llanma

Zamonaviy raqamli dunyoda foydalanuvchi tajribasi (UX) eng muhim o'rinda turadi. Uzluksiz va to'siqlarsiz o'zaro ta'sir mamnun bo'lgan foydalanuvchi va hafsalasi pir bo'lgan foydalanuvchi o'rtasidagi farqni yuzaga keltirishi mumkin. Eng keng tarqalgan, ammo ko'pincha e'tibordan chetda qoladigan muammolardan biri bu qurilma ekranining noqulay paytda o'chib qolishidir. Murakkab retseptga amal qilayotganingizni, planshetingizdan muhim taqdimot o'tkazayotganingizni yoki darvozada raqamli chiptani ko'rsatayotganingizni tasavvur qiling, birdan ekran qorayib qoladi. Bu muammoni Wake Lock API nafis tarzda hal qiladi.

Ushbu to'liq qo'llanma Wake Lock API'ni boshidan oxirigacha o'rganadi. Biz uning nima ekanligini, nima uchun ba'zi ilovalar uchun muhimligini, uni qanday qilib to'g'ri amalga oshirishni va undan mas'uliyat bilan foydalanishni ta'minlash uchun eng yaxshi amaliyotlarni ko'rib chiqamiz. Tajribali veb-dasturchi bo'lasizmi yoki endigina boshlayotgan bo'lasizmi, veb-ilovalaringizni yaxshilash va yuqori darajadagi foydalanuvchi tajribasini ta'minlash uchun bilimga ega bo'lasiz.

Asosiy muammo: Agressiv Quvvat Boshqaruvi va Foydalanuvchi Ehtiyojlari

Qurilma ishlab chiqaruvchilari va operatsion tizim dasturchilari batareya muddatini optimallashtirish uchun tinimsiz ishlaydilar. Ularning asosiy vositalaridan biri bu agressiv quvvat boshqaruvi bo'lib, u qisqa muddatli harakatsizlikdan so'ng ekranni xiralashtirish va oxir-oqibat o'chirishni o'z ichiga oladi. Maqolalarni ko'rish yoki elektron pochta xabarlarini tekshirish kabi ko'pchilik foydalanish holatlari uchun bu qimmatli batareya quvvatini tejaydigan ajoyib xususiyatdir.

Biroq, bu xatti-harakat foydalanuvchi jalb qilingan, lekin ekran bilan jismonan o'zaro aloqada bo'lmagan ilovalar uchun jiddiy to'siqqa aylanadi. Quyidagi umumiy global stsenariylarni ko'rib chiqing:

• Pazandachilik san'ati: Foydalanuvchi planshetida retseptga amal qilmoqda. Qo'llari unga belangan va keyingi qadamni ko'rishdan oldin ekran o'chib qoladi.
• Ommaviy nutq: Taqdimotchi veb-asosidagi slaydlar to'plamidan foydalanmoqda. U biror fikrni batafsil tushuntirish uchun to'xtaydi va ekran xiralashib, taqdimotining oqimini buzadi.
• Sayohat va tadbirlar: Sayohatchi telefonida aviakompaniyaning bortga chiqish talonini, QR kodni ko'rsatib turibdi. Darvozada navbatda turganida ekranni yoqiq holda saqlash uchun uni qayta-qayta bosib turishiga to'g'ri keladi.
• Fitnes va salomatlik: Kimdir veb-asosidagi yoga yoki yuqori intensivlikdagi interval mashg'ulotlari (HIIT) tartibiga amal qilmoqda va ekran uyqu taymeri uning mashg'ulotini to'xtatib qo'yadi.

Ilgari dasturchilar bu muammoni hal qilish uchun orqa fonda ovozsiz, takrorlanuvchi videoni ijro etish kabi aqlli, ammo samarasiz "hiyla-nayranglarga" murojaat qilishgan. Bu usullar ishonchsiz edi, keraksiz resurslarni iste'mol qilardi va standartlashtirilgan yechim emas edi. Vebga yaxshiroq yo'l kerak edi — ekran holatini boshqarish uchun rasmiy, samarali va foydalanuvchini hurmat qiladigan mexanizm. Aynan shu yerda Wake Lock API yordamga keladi.

Wake Lock API bilan tanishuv

Wake Lock API bu zamonaviy veb-standart bo'lib, veb-ilova qurilma ekranining xiralashishi yoki qulflanishini oldini olish uchun "uyg'oqlik qulfi" (wake lock) so'rashiga imkon beruvchi rasmiy mexanizmni taqdim etadi. Bu xavfsizlik, samaradorlik va foydalanuvchi roziligini asos qilib olgan oddiy, ammo kuchli vositadir.

API'ning asosiy xususiyatlari quyidagilardan iborat:

• Foydalanuvchiga yo'naltirilgan: U faqat bosish yoki tegish kabi foydalanuvchi harakatiga javoban faollashtirilishi mumkin. Veb-sayt orqa fonda yashirincha uyg'oqlik qulfini ololmaydi.
• Ko'rinuvchanlikka sezgir: Ilova yoki oyna endi ko'rinmay qolganda, uyg'oqlik qulfi avtomatik ravishda bekor qilinadi. Bu muhim xavfsizlik va quvvatni tejash xususiyatidir.
• Faqat xavfsiz kontekstlarda: API faqat HTTPS orqali uzatiladigan sahifalarda mavjud bo'lib, zamonaviy veb-xavfsizlik standartlarini mustahkamlaydi.
• Samarali: Bu brauzerning mahalliy xususiyati bo'lib, uni oldingi vaqtinchalik yechimlarga qaraganda ancha quvvat tejamkor qiladi.

Hozirda API bir turdagi uyg'oqlik qulfini qo'llab-quvvatlaydi: 'screen'. Bu tur ekran o'chishining oldini oladi. Ba'zi mahalliy platformalarda `system` uyg'oqlik qulfi (bu CPU'ni ishlayotgan holda saqlaydi) tushunchasi mavjud bo'lsa-da, xavfsizlik va barqarorlik sababli bu vebga taqdim etilmagan.

Wake Lock API'ni Amalga Oshirish: Qadamma-qadam Qo'llanma

Endi keling, Wake Lock API'dan foydalanishning amaliy jihatlariga sho'ng'iymiz. Biz funksiyani aniqlash, qulfni so'rash va bekor qilish hamda ko'rinuvchanlik o'zgarishlarini boshqarishni o'z ichiga olgan mustahkam amalga oshirishni yaratamiz.

1-qadam: Funksiyani Aniqlash

Har qanday zamonaviy API'dan foydalanishga urinishdan oldin, birinchi qadam har doim foydalanuvchi brauzeri uni qo'llab-quvvatlashini tekshirishdir. Funksiyani aniqlash deb nomlanuvchi bu amaliyot ilovangizning eski brauzerlarda buzilmasligini ta'minlaydi. Wake Lock API'ni navigator obyektida 'wakeLock' mavjudligini tekshirish orqali aniqlashingiz mumkin.

            
if ('wakeLock' in navigator) {
  // Wake Lock API qo'llab-quvvatlanadi.
  console.log('Screen Wake Lock API qo\'llab-quvvatlanadi!');
} else {
  // Wake Lock API qo'llab-quvvatlanmaydi.
  console.log('Ushbu brauzerda Screen Wake Lock API qo\'llab-quvvatlanmaydi.');
}

            

              
                Copy
              
            
          

Bu oddiy tekshiruv sizga qo'llab-quvvatlanmaydigan brauzerlardagi foydalanuvchilar uchun zaxira yechimini taqdim etish yoki funksionallikni shunchaki yashirish imkonini beradi, bu prinsip muvofiq degradatsiya (graceful degradation) deb nomlanadi.

2-qadam: Ekran Uyg'oqlik Qulfini So'rash

Uyg'oqlik qulfini so'rash asinxron operatsiya hisoblanadi, chunki u foydalanuvchi ruxsati yoki boshqa tekshiruvlarni talab qilishi mumkin. Shuning uchun, navigator.wakeLock.request() metodi Promise qaytaradi. Metod bitta argument qabul qiladi: siz so'rayotgan qulf turi, hozircha bu har doim 'screen' bo'ladi.

Bu Promise'ga asoslangan API bo'lgani uchun, uni boshqarishning eng yaxshi usuli try...catch bloki ichidagi async/await strukturasidan foydalanishdir. try bloki qulfning muvaffaqiyatli olinishini, catch bloki esa foydalanuvchi ruxsatni rad etishi yoki hujjat faol bo'lmasligi kabi har qanday xatoliklarni boshqaradi.

Keling, qulfni so'rash uchun funksiya yaratamiz:

            
// Uyg'oqlik qulfi sentinelini saqlash uchun global o'zgaruvchi e'lon qilamiz.
let wakeLockSentinel = null;

const requestWakeLock = async () => {
  if ('wakeLock' in navigator) {
    try {
      wakeLockSentinel = await navigator.wakeLock.request('screen');
      wakeLockSentinel.addEventListener('release', () => {
        console.log('Ekran uyg\'oqlik qulfi bekor qilindi');
      });
      console.log('Ekran uyg\'oqlik qulfi faol');
    } catch (err) {
      // So'rov muvaffaqiyatsiz tugadi - balki foydalanuvchi ruxsatni rad etgandir.
      console.error(`${err.name}, ${err.message}`);
    }
  }
};

            

              
                Copy
              
            
          

Keling, buni tahlil qilamiz:

• Biz kengroq doirada wakeLockSentinel o'zgaruvchisini e'lon qilamiz. Bu o'zgaruvchi bizning faol qulfimizni ifodalovchi obyektni saqlaydi.
• try bloki ichida biz navigator.wakeLock.request('screen') natijasini await qilamiz.
• Muvaffaqiyatli bo'lsa, promise WakeLockSentinel obyekti bilan yakunlanadi. Bu obyekt qulfni boshqarish uchun bizning kalitimizdir.
• Keyin biz sentinelga 'release' hodisasi uchun hodisa tinglovchisini qo'shamiz. Bu hodisa qulf har qanday sababga ko'ra (masalan, ilova ko'rinuvchanligining o'zgarishi, qo'lda bekor qilish) bekor qilinganda ishga tushadi, bu sizning interfeysingizni yangilash uchun foydalidir.

3-qadam: `WakeLockSentinel` Obyektini Tushunish

Siz uyg'oqlik qulfini muvaffaqiyatli olganingizda, sizga WakeLockSentinel obyekti beriladi. Bu obyekt qulf bilan ishlash uchun sizning interfeysingizdir. Uning ikkita asosiy xususiyati bor:

• release() metodi: Uyg'oqlik qulfini qo'lda bekor qilish uchun chaqirishingiz mumkin bo'lgan metod. Bu qulf bekor qilingandan so'ng yakunlanadigan Promise qaytaradi.
• released xususiyati: Qulf faol bo'lganda false bo'ladigan va u bekor qilingandan so'ng true ga aylanadigan mantiqiy qiymat.
• type xususiyati: Olingan qulf turini aks ettiruvchi qator (masalan, 'screen').

4-qadam: Uyg'oqlik Qulfini Bekor Qilish

Qulfni olish qanchalik muhim bo'lsa, uni qachon va qanday bekor qilishni bilish ham shunchalik muhimdir. Ekranni cheksiz muddatga uyg'oq holda saqlamasligingiz kerak. Foydalanuvchi uni talab qilgan vazifani tugatishi bilan qulfni bekor qiling.

Masalan, taqdimot ilovasida, foydalanuvchi slayd tahrirlovchisiga qaytganida qulfni bekor qilishingiz mumkin. Retsept ilovasida sizda "Pishirishni tugatdim" degan tugma bo'lishi mumkin, u qulfni bekor qiladi.

Qulfni qo'lda bekor qilish uchun funksiyani qanday yaratish mumkinligi:

            
const releaseWakeLock = async () => {
  if (wakeLockSentinel) {
    await wakeLockSentinel.release();
    wakeLockSentinel = null;
  }
};

            

              
                Copy
              
            
          

Bu funksiya wakeLockSentinel mavjudligini tekshiradi. Agar mavjud bo'lsa, u release() metodini chaqiradi va keyin sentinel o'zgaruvchisini yana null ga o'rnatadi. Bu holatni boshqarish uchun yaxshi amaliyot bo'lib, hozirda hech qanday qulf faol emasligini aniq ko'rsatadi.

5-qadam: Eng Muhim Qism - Ko'rinuvchanlik O'zgarishlarini Boshqarish

Wake Lock API'ning asosiy dizayn tamoyili shundaki, qulflar sahifaning ko'rinuvchanligiga bog'langan. Agar foydalanuvchi boshqa ilovaga o'tsa yoki oynani kichraytirsa, brauzer uyg'oqlik qulfini avtomatik ravishda bekor qiladi. Bu batareyani tejash va foydalanuvchi irodasini hurmat qilish uchun muhim xususiyatdir.

Biroq, foydalanuvchi sizning ilovangizga qaytganida nima bo'ladi? Qulf yo'qolgan bo'ladi. Mustahkam amalga oshirish ko'rinuvchanlik o'zgarishlarini tinglashi va agar foydalanuvchi chetga chiqishdan oldin u faol bo'lgan bo'lsa, qulfni qayta olishi kerak.

Bunga document dagi visibilitychange hodisasini tinglash orqali erishishimiz mumkin.

            
const handleVisibilityChange = async () => {
  if (wakeLockSentinel !== null && document.visibilityState === 'visible') {
    // Ilova ko'rinadigan bo'ldi va bizda avval uyg'oqlik qulfi bor edi.
    // Keling, uni qayta olaylik.
    await requestWakeLock();
  }
};

document.addEventListener('visibilitychange', handleVisibilityChange);

            

              
                Copy
              
            
          

Ushbu ishlovchida biz ikkita shartni tekshiramiz: avval uyg'oqlik qulfi faol bo'lganmi (ya'ni, wakeLockSentinel null emas), va hujjat hozir ko'rinadimi? Agar ikkalasi ham to'g'ri bo'lsa, biz requestWakeLock funksiyamizni yana chaqiramiz. Bu foydalanuvchi uchun uzluksiz tajribani ta'minlaydi. E'tibor bering, qulf ko'rinuvchanlik o'zgarishi tufayli avtomatik ravishda bekor qilinganda, bizning asl wakeLockSentinel obyektimizning released xususiyati `true` bo'ladi, lekin bizning o'zgaruvchi havolamiz hali ham mavjud. Yaxshiroq yondashuv alohida bayroqdan foydalanish bo'lishi mumkin.

Hammasini Birlashtirish: Mustahkam Misol

Keling, hamma narsani to'liq, qayta ishlatiladigan misolga birlashtiramiz. Biz uyg'oqlik qulfini yoqish va o'chirish uchun oddiy tugmadan foydalanamiz va biz muhokama qilgan barcha chekka holatlarni boshqaramiz.

            
<h2>Wake Lock API Demosi</h2>
<p>Ekran blokirovkasini faollashtirish yoki o'chirish uchun tugmani bosing.</p>
<button id="wakeLockToggleButton">Ekran Blokirovkasini Faollashtirish</button>
<p id="wakeLockStatus">Holat: Noaktiv</p>

<script>
let wakeLockSentinel = null;

// UI Elementlari
const toggleButton = document.getElementById('wakeLockToggleButton');
const statusDiv = document.getElementById('wakeLockStatus');

// Uyg'oqlik qulfini so'rash funksiyasi
const requestWakeLock = async () => {
  try {
    wakeLockSentinel = await navigator.wakeLock.request('screen');
    
    // Bekor qilish hodisalarini tinglash
    wakeLockSentinel.addEventListener('release', () => {
      // Uyg'oqlik qulfi bekor qilindi.
      statusDiv.textContent = 'Holat: Noaktiv';
      toggleButton.textContent = 'Ekran Blokirovkasini Faollashtirish';
      // Ko'rinuvchanlik ishlovchimiz qulfning bekor qilinganini bilishi uchun sentinelni null ga o'rnatamiz.
      wakeLockSentinel = null; 
    });
    
    statusDiv.textContent = 'Holat: Faol - Ekrangiz uxlamaydi.';
    toggleButton.textContent = 'Ekran Blokirovkasini O\'chirish';
    console.log('Ekran uyg\'oqlik qulfi faol.');

  } catch (err) {
    // So'rov muvaffaqiyatsiz tugadi.
    statusDiv.textContent = `Holat: Xato - ${err.name}, ${err.message}`;
    console.error(`Uyg'oqlik qulfi so'rovi muvaffaqiyatsiz tugadi: ${err.name}, ${err.message}`);
  }
};

// Uyg'oqlik qulfini bekor qilish funksiyasi
const releaseWakeLock = async () => {
  if (wakeLockSentinel) {
    await wakeLockSentinel.release();
    wakeLockSentinel = null;
  }
};

// O'zgartirish tugmasi hodisa tinglovchisi
toggleButton.addEventListener('click', async () => {
  if (wakeLockSentinel) {
    await releaseWakeLock();
  } else {
    await requestWakeLock();
  }
});

// Agar sahifa yana ko'rinadigan bo'lsa, uyg'oqlik qulfini qayta oling
document.addEventListener('visibilitychange', async () => {
  // Bu tekshiruv muhim. Biz qulfni faqat ilova yashirilishidan oldin
  // faol bo'lgan bo'lsagina qayta olishni xohlaymiz. Biroq, sentinel
  // avtomatik ravishda bekor qilinadi, shuning uchun bizga alohida bayroq yoki tekshiruv kerak.
  // Oddiyroq mantiq - foydalanuvchi uni yoqishni *niyat* qilganini tekshirish.
  // Ushbu demo uchun, agar tugmada "O'chirish" deb yozilgan bo'lsa, foydalanuvchi uni yoqishni xohlaydi deb faraz qilamiz.
  if (document.visibilityState === 'visible' && toggleButton.textContent === 'Ekran Blokirovkasini O\'chirish') {
    await requestWakeLock();
  }
});

// API qo'llab-quvvatlanishini dastlabki tekshirish
if (!('wakeLock' in navigator)) {
  statusDiv.textContent = 'Holat: Wake Lock API qo\'llab-quvvatlanmaydi.';
  toggleButton.disabled = true;
}
</script>

            

              
                Copy
              
            
          

Eng Yaxshi Amaliyotlar va Global Mulohazalar

Wake Lock API kuchli vositadir va katta kuch bilan katta mas'uliyat keladi. Uni suiiste'mol qilish batareyaning tugashiga va yomon foydalanuvchi tajribasiga olib kelishi mumkin. Quyida rioya qilish kerak bo'lgan ba'zi muhim eng yaxshi amaliyotlar keltirilgan.

1. Uni Tejamkorlik bilan va Faqat Zarur bo'lganda Ishlating

Hech qachon butun veb-saytingizda standart sifatida uyg'oqlik qulfini faollashtirmang. U faqat aniq foyda keltiradigan maxsus ko'rinishlar yoki foydalanuvchi oqimlari uchun ishlatilishi kerak. Masalan, yangiliklar veb-saytida sizga bosh sahifa uchun uyg'oqlik qulfi kerak emas, lekin u asosiy maqola ko'rinishi uchun foydalanuvchi tomonidan sozlanadigan variant bo'lishi mumkin.

2. Foydalanuvchi Harakati Bilan Boshlang

API allaqachon dastlabki so'rov uchun foydalanuvchi ishorasini talab qiladi. Buni qabul qiling. Eng yaxshi amaliyot - uyg'oqlik qulfini "Taqdimotni boshlash" tugmasini bosish, "Pishirish rejimini boshlash" tugmachasini almashtirish yoki mashg'ulot videosini ijro etish kabi aniq foydalanuvchi harakatiga bog'lashdir. Bu foydalanuvchining nazoratda ekanligini va ekran nima uchun yoqilganligini tushunishini ta'minlaydi.

3. Aniq Vizual Fikr-mulohaza Berish

Uyg'oqlik qulfi faol bo'lganda foydalanuvchini xabardor qiling. Bu kichik belgi, holat xabari ("Taqdimot rejimi faol") yoki interfeysdagi o'zgarish bo'lishi mumkin. Eng muhimi, siz foydalanuvchiga uyg'oqlik qulfini o'chirishning oson va aniq usulini taqdim etishingiz kerak. Bu foydalanuvchi avtonomiyasini hurmat qiladi va ular xohlagan vaqtda ekranlarini uxlatolmaydigan vaziyatlarning oldini oladi.

4. Hayot Siklini Ehtiyotkorlik bilan Boshqaring

Uyg'oqlik qulfi endi kerak bo'lmaganda uni har doim bekor qiling. Agar foydalanuvchi taqdimotini tugatsa yoki retsept sahifasidan uzoqlashsa, ilovangiz mantig'i avtomatik ravishda qulfni bekor qilishi kerak. Faqatgina foydalanuvchining uni qo'lda o'chirishiga yoki ilovalarni almashtirishiga ishonib qolmang.

5. Batareya Hayotini Yodda Tuting

Ekranlarning o'chishining asosiy sababi - batareyani tejash. Sizning ilovangiz muhim bo'lishi mumkin, ammo o'lik batareya foydalanuvchi uchun ancha katta muammodir. Har doim foydalanuvchi tajribasining foydasini ortgan quvvat iste'moli narxiga nisbatan o'lchang. Uzoq davom etadigan vazifalar uchun foydalanuvchiga ekranning uyg'oq holda saqlanayotgani va ko'proq batareya iste'mol qilishi mumkinligini eslatishni o'ylab ko'ring.

6. Muvofiq Degradatsiya Muhimdir

Wake Lock API hali barcha brauzerlarda qo'llab-quvvatlanmaydi. Sizning ilovangiz u holda ham mukammal ishlashi kerak. Uyg'oqlik qulfi progressiv takomillashtirish sifatida qaralishi kerak — qo'llab-quvvatlanadigan brauzerlardagi foydalanuvchilar uchun tajribani yaxshilaydigan, ammo uning yo'qligi boshqalar uchun asosiy funksionallikni buzmaydigan xususiyat.

Xulosa: Uzluksiz Tajribalar Uchun Yangi Standart

Wake Lock API veb-platforma uchun oldinga qo'yilgan muhim qadamdir. U umumiy foydalanuvchi tajribasi muammosiga eski, samarasiz hiyla-nayranglarni standartlashtirilgan, xavfsiz va quvvatni tejaydigan yechim bilan almashtiradi. Veb-ilovalarga ekran uyqusini nazorat ostida va foydalanuvchiga qulay tarzda oldini olishga imkon berish orqali, u butun dunyo bo'ylab odamlar tomonidan ishlatiladigan taqdimot vositalari va raqamli kiosklardan tortib fitnes va pazandachilik ilovalarigacha bo'lgan keng doiradagi ilovalar uchun yangi interaktivlik darajasini ochadi.

Uning mexanikasini tushunish, uni mustahkam amalga oshirish va eng yaxshi amaliyotlarga rioya qilish orqali siz ushbu API'dan foydalanib, foydalanuvchining asosiy muammolaridan birini bartaraf etishingiz mumkin. Uni oqilona ishlatishni, har doim foydalanuvchining nazorati va xabardorligini birinchi o'ringa qo'yishni va uzluksiz, to'siqsiz va haqiqatan ham yoqimli tajriba taqdim etadigan ilovalar yaratishni unutmang.